﻿<!doctype html>
<html>

<head>
    <title>jcTitle Demo替代浏览器自身的title，美观、小巧1KB不到、灵活、方便,依赖jquery库</title>
    <link href="style/style.css" rel="stylesheet" /> 
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="script/jcTitle.min.js" charset="utf-8"></script>
    <script type="text/javascript">
	  $(function(){
		$('ul li').eq(0).jcTitle();
		$('ul li').eq(1).jcTitle({follow:false});
		$('ul li').eq(2).jcTitle({
				'font-size': 18,
				'border':'solid 3px red',
				'background': '#F00'
		});
		$('ul li').eq(3).jcTitle({
			content:'我直接传入内容，此时会忽略title标签内容。'
		});
	
		$('h5').jcTitle();
	});
    </script>
 
</head>

<body>
    <h1>jcTitle</h1>
    <h2>替代浏览器自身的title，美观、小巧<span style="font-size:12px;">1KB不到</span>、灵活、方便,依赖jquery库
	<span>浏览器边缘自动识别</span></h2>


        <div style="width:98%;margin:0 auto;padding:15px;background:#F0F0F0;">
            <strong>引入</strong>
			<p><span class="script1">&lt;script src=</span><span class="script2">&quot;script/jquery.min.js&quot;</span> <span class="script1">charset=</span><span class="script2">&quot;utf-8&quot;</span><span class="script1">&gt;&lt;/script&gt;</span></p>
			<p><span class="script1">&lt;script src=</span><span class="script2">&quot;script/jcTitle.min.js&quot;</span> <span class="script1">charset=</span><span class="script2">&quot;utf-8&quot;</span><span class="script1">&gt;&lt;/script&gt;</span></p>
			<br />			<br />
			<strong>开始使用</strong>
			
			<p>默认调用：$('<span class="script2">ul li</span>').jcTitle<span class="STYLE2">()</span>;</p>
			<p>指定参数调用：$('<span class="script2">ul li</span>').jcTitle<span class="STYLE2">({</span><span class="script2"><span class="STYLE3">follow</span></span><span class="STYLE2">:</span><span class="script2"><span class="STYLE3">false</span></span><span class="STYLE2">})</span>;</p>
		  <p>指定样式：</p>
			<p>$('('<span class="script2">ul li</span>').jcTitle<span class="STYLE2">({</span><br>
			  <span style="padding-left:24px;">'font-size': 18,</span><br>
			  <span style="padding-left:24px;">'border':'solid 3px red'</span><br>
		  <span class="STYLE2">})</span>;</p>
		  	<p>指定内容：</p>
			<p>$('('<span class="script2">p</span>').jcTitle<span class="STYLE2">({</span><br>
			  <span style="padding-left:24px;">content: '直接指定title内容，此时不管title标签有没有内容，都将会被忽略。'</span><br />
		  <span class="STYLE2">})</span>;</p>
</div>


 				<br />			
 				<br />			<br />
	
    <ul>
        <li title="我是默认的样式">默认样式调用jcTitle</li>
        <li title="我是默认的样式，不会随着鼠标移动">我也是默认样式调用jcTitle，但我不会随着鼠标移动</li>
        <li title="我使用了自定义的样式">我使用了自定义的样式 font:18px border:solid 3px red;</li>
		<li title="我将会被忽略">我直接传入内容，此时会忽略title标签内容</li>
    </ul>
	
	<h5 title="边缘自动识别，并调整位置">边缘自动识别，并调整位。边缘自动识别，并调整位置。</h5>	
</body>
</html>